<template>
  <el-form ref="editFormRef" :model="userInfo">
    <el-form-item label="姓名" prop="name">
      <el-input v-model.trim="userInfo.name" />
    </el-form-item>
    <el-form-item label="账号" prop="account">
      <el-input v-model.trim="userInfo.account" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio v-model="userInfo.sex" :label="1">男</el-radio>
      <el-radio v-model="userInfo.sex" :label="2">女</el-radio>
      <el-radio v-model="userInfo.sex" :label="0">保密</el-radio>
    </el-form-item>
    <!--    <el-form-item label="头像" prop="img">-->
    <!--      <el-input v-model.trim="userInfo.img" />-->
    <!--    </el-form-item>-->
    <el-form-item label="邮箱" prop="email">
      <el-input v-model.trim="userInfo.email" />
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model.trim="userInfo.phone" />
    </el-form-item>
    <!--    <el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px">-->
    <el-form-item label="修改头像" prop="img">
      <el-upload
        :action="fileUpload"
        :headers="{Authorization:token}"
        list-type="picture-card"
        :limit="1"
        :on-exceed="onExceed"
        :on-success="handleAvatarSuccess"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <!-- <el-upload
        class="avatar-uploader"
        :action="fileUpload"
        :show-file-list="false"
        :headers="{ Authorization: token }"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="nextProjectForm.publicWelfareUrl"
          :src="nextProjectForm.publicWelfareUrl"
          class="avatar"
        >
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload> -->
    </el-form-item>
    <!--    </el-form>-->
    <el-form-item>
      <el-button type="primary" @click="updateUser">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateInfo, getInfo } from '@/api/user'
import { mapGetters } from 'vuex'
export default {

  data() {
    return {
      // nextProjectForm: {
      //   publicWelfareUrl: ''
      // },
      userInfo: {
        account: '',
        name: '',
        role: '',
        id: '',
        email: '',
        phone: '',
        img: '',
        sex: ''
      }
    }
  },
  computed: {
    ...mapGetters(['fileUpload', 'token'])
  },

  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      getInfo().then(res => {
        const { resultCode, data } = res
        if (resultCode === 200) {
          this.userInfo = data
        }
      })
    },
    updateUser() {
      updateInfo(this.userInfo).then(response => {
        if (response.resultCode === 200) {
          this.$store.dispatch('user/getInfo')
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    onExceed() {
      this.$message.warning('最多只能上传一张图片')
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response && response.data) {
        this.userInfo.img = response.data
      }
    }
  }
}
</script>
<style lang='scss'>

  // .avatar-uploader .el-upload {
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  // }
  // .avatar-uploader .el-upload:hover {
  //   border-color: #409eff;
  // }
  // .avatar-uploader-icon {
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 178px;
  //   height: 178px;
  //   line-height: 178px;
  //   text-align: center;
  // }
  // .avatar {
  //   width: 178px;
  //   height: 178px;
  //   display: block;
  // }

</style>
